<template>
  <div class="quanju" style="margin-top:20%;">
      <div class="tuozhuai">
        <div class="dk">
          <div class="dk-tp">
            <template v-for="item in aa.splice(0,4)" :key="item">
                  <img :src='item.img' width="50" height="45"/>
            </template>
          </div>
          <div class="dk-mz">
            <div style="width:20px,height: 20px;" >眼科</div>
            <div style="width:20px,height: 20px;" >整形美容</div>
            <div style="width:20px,height: 20px;" >眼科</div>
            <div style="width:20px,height: 20px;" >整形美容</div>
          </div>
        </div>
        <div class="dk">
          <div class="dk-tp">
            <template v-for="item in aa.splice(0,4)" :key="item">
                  <img :src='item.img' width="50" height="45"/>
            </template>
          </div>
          <div class="dk-mz">
            <div style="width:20px,height: 20px;" >眼科</div>
            <div style="width:20px,height: 20px;" >整形美容</div>
            <div style="width:20px,height: 20px;" >眼科</div>
            <div style="width:20px,height: 20px;" >整形美容</div>
          </div>
        </div>
      </div>
      <div class="rmbd">
        <div class="bt">热门榜单</div>
        <div class="bbody">
          <div class="a" @click="kbb()">
            <p>口碑榜</p>
            <div class="img1">
              <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E5%95%86%E5%9F%8E/u3399.svg"/>
            </div>
            </div>
          <div class="b" @click="this.$router.push('/HospitalList')">
            <p>医院榜</p>
            <div class="img1">
              <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E5%95%86%E5%9F%8E/u3402.svg"/>
            </div>
          </div>
          <div class="c" @click="ysb()">
            <p>医生榜</p>
            <div class="img1">
              <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E5%95%86%E5%9F%8E/u3399.svg"/>
            </div>
          </div>
        </div>
      </div>

      <div class="jpxm">
        <p>精品项目</p>
        <div class="jjbody">
          <div class="mfxx">
            <div class="xmk" @click="this.$router.push('/shopdetails')">
                <div class="tp">
                    <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1243.png"/>
                </div>
                <div class="jianjie">
                    <p><span>【皮秒激光】皮秒嫩肌肤保</span></p>
                    <p><span>湿去黄提高无刺激科学...</span></p>
                </div>
                <div class="youhun">
                  <div class="k">特惠</div>
                  <div class="k">秒杀</div>
                </div>
                <div class="jiagek">
                  <div class="jg">￥999.0</div>
                  <div class="dz">李明金，北京华瑞整形</div>
                </div>
            </div>
            <div class="xmk">
              <div class="tp">
                    <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1243.png"/>
                </div>
                <div class="jianjie">
                    <p><span>【皮秒激光】皮秒嫩肌肤保</span></p>
                    <p><span>湿去黄提高无刺激科学...</span></p>
                </div>
                <div class="youhun">
                  <div class="k">特惠</div>
                  <div class="k">秒杀</div>
                </div>
                <div class="jiagek">
                  <div class="jg">￥999.0</div>
                  <div class="dz">李明金，北京华瑞整形</div>
                </div>
            </div>
            <div class="xmk">
                <div class="tp">
                    <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1243.png"/>
                </div>
                <div class="jianjie">
                    <p><span>【皮秒激光】皮秒嫩肌肤保</span></p>
                    <p><span>湿去黄提高无刺激科学...</span></p>
                </div>
                <div class="youhun">
                  <div class="k">特惠</div>
                  <div class="k">秒杀</div>
                </div>
                <div class="jiagek">
                  <div class="jg">￥999.0</div>
                  <div class="dz">李明金，北京华瑞整形</div>
                </div>
            </div>
            <div class="xmk">
              <div class="tp">
                    <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1243.png"/>
                </div>
                <div class="jianjie">
                    <p><span>【皮秒激光】皮秒嫩肌肤保</span></p>
                    <p><span>湿去黄提高无刺激科学...</span></p>
                </div>
                <div class="youhun">
                  <div class="k">特惠</div>
                  <div class="k">秒杀</div>
                </div>
                <div class="jiagek">
                  <div class="jg">￥999.0</div>
                  <div class="dz">李明金，北京华瑞整形</div>
                </div>
            </div>
            <div class="xmk">
                <div class="tp">
                    <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1243.png"/>
                </div>
                <div class="jianjie">
                    <p><span>【皮秒激光】皮秒嫩肌肤保</span></p>
                    <p><span>湿去黄提高无刺激科学...</span></p>
                </div>
                <div class="youhun">
                  <div class="k">特惠</div>
                  <div class="k">秒杀</div>
                </div>
                <div class="jiagek">
                  <div class="jg">￥999.0</div>
                  <div class="dz">李明金，北京华瑞整形</div>
                </div>
            </div>
            <div class="xmk">
              <div class="tp">
                    <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1243.png"/>
                </div>
                <div class="jianjie">
                    <p><span>【皮秒激光】皮秒嫩肌肤保</span></p>
                    <p><span>湿去黄提高无刺激科学...</span></p>
                </div>
                <div class="youhun">
                  <div class="k">特惠</div>
                  <div class="k">秒杀</div>
                </div>
                <div class="jiagek">
                  <div class="jg">￥999.0</div>
                  <div class="dz">李明金，北京华瑞整形</div>
                </div>
            </div>
            <div class="xmk">
                <div class="tp">
                    <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1243.png"/>
                </div>
                <div class="jianjie">
                    <p><span>【皮秒激光】皮秒嫩肌肤保</span></p>
                    <p><span>湿去黄提高无刺激科学...</span></p>
                </div>
                <div class="youhun">
                  <div class="k">特惠</div>
                  <div class="k">秒杀</div>
                </div>
                <div class="jiagek">
                  <div class="jg">￥999.0</div>
                  <div class="dz">李明金，北京华瑞整形</div>
                </div>
            </div>
            <div class="xmk">
              <div class="tp">
                    <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1243.png"/>
                </div>
                <div class="jianjie">
                    <p><span>【皮秒激光】皮秒嫩肌肤保</span></p>
                    <p><span>湿去黄提高无刺激科学...</span></p>
                </div>
                <div class="youhun">
                  <div class="k">特惠</div>
                  <div class="k">秒杀</div>
                </div>
                <div class="jiagek">
                  <div class="jg">￥999.0</div>
                  <div class="dz">李明金，北京华瑞整形</div>
                </div>
            </div>  
            <div class="xmk">
                <div class="tp">
                    <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1243.png"/>
                </div>
                <div class="jianjie">
                    <p><span>【皮秒激光】皮秒嫩肌肤保</span></p>
                    <p><span>湿去黄提高无刺激科学...</span></p>
                </div>
                <div class="youhun">
                  <div class="k">特惠</div>
                  <div class="k">秒杀</div>
                </div>
                <div class="jiagek">
                  <div class="jg">￥999.0</div>
                  <div class="dz">李明金，北京华瑞整形</div>
                </div>
            </div>
            <div class="xmk">
              <div class="tp">
                    <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1243.png"/>
                </div>
                <div class="jianjie">
                    <p><span>【皮秒激光】皮秒嫩肌肤保</span></p>
                    <p><span>湿去黄提高无刺激科学...</span></p>
                </div>
                <div class="youhun">
                  <div class="k">特惠</div>
                  <div class="k">秒杀</div>
                </div>
                <div class="jiagek">
                  <div class="jg">￥999.0</div>
                  <div class="dz">李明金，北京华瑞整形</div>
                </div>
            </div>                  
          </div>
        </div>
        <div class="jiaz">
          <van-loading type="spinner" size="24px">正在加载</van-loading></div>
      </div>
  </div>
</template>

<script lang="ts" setup>
  import {ref} from 'vue'
  import {SelectedProjects} from '@/api/shopmall.js'
  import {useRouter} from 'vue-router'

  // export default{
  //     setup(){
        const router = useRouter();
        function kbb(){
          router.push({name:'publicPraiseList'})
        }
        function yyb(){
          router.push({name:'HospitalList'})
        }
        function ysb(){
          router.push({name:'DoctorList'})
        }
        // return{
        //   kbb,
        // }
      // }

  // }
  let aa = ref([])
  SelectedProjects().then((res:any)=>{
    // console.log(res.data.data,"<----------");
    aa.value = res.data.data
    console.log(aa.value);
    
  })

</script>
<style scoped>
  .quanju{
    width: 100%;
    height: 2000px;
    background-color: #f5f3f0;
  }
  /* -------------------------------------------------------------------- */
  .tuozhuai{
    width: 100%;
    height: 8.7%;
    background-color: #ffffff;
  }
  .dk{width: 100%; height: 49%; overflow: hidden;}
  .dk-tp{width: 100%; height: 60%;  display: flex; justify-content:space-around; }
  .dk-tp img{width: 40px; height: 40px; border: 0; border-radius: 50px;}
  .dk-mz{display: flex; justify-content:space-around;}
  .my-swipe .van-swipe-item {
    color: red;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: white;
  }
  .k1{width: 100%;
      height: 100%;
    }
  .k1-1{
    width: 100%;
    height: 50%;

  }
/* --------------------------------------------------------------------- */
  .rmbd{
    width: 100%;
    height: 9.9%;
    margin-top: 10px;
    background-color: #ffffff;
  }

  .bt{
    height: 20%;
    font-size: 18px;
    line-height:50px;
    text-indent: 20px;
  }

  .bbody{
    width: 100%;
    height: 80%;
    display: flex;
    justify-content:space-around;
  }
  .bbody img{
    width: 80px;
    height: 79px;
  }
  .img1{
    width: 100%;
    height: 70%;
    text-align: center;
    line-height: 180px;
  }
  .a{ width:30% ; height: 90%; background-color: #f3f8fa; border: none; border-radius: 8px; font-size:14px; }
  .a p {line-height: 50px;text-indent: 10px;}
  .b{ width:30%;height: 90%; background-color: #fdf2f0; border: none; border-radius: 8px; font-size:14px}
  .b p{line-height: 50px;text-indent: 10px;}
  .c{ width: 30%;height: 90%; background-color: #f2f7f7; border: none; border-radius: 8px; font-size:14px}
  .c p{line-height: 50px;text-indent: 10px;}
/* ------------------------------------------------------------------- */
  .jpxm{
    width:100%;
    height: 81%;
    margin-top: 3%;
  }
  .jpxm p{line-height:20px; text-indent: 20px;font-size:20px;}
  .jjbody{ width: 100%; height: 95%;}
  .mfxx{width: 100%; height: 100%; display: flex; justify-content: space-around;flex-wrap: wrap;}
  .xmk{width: 42%; height: 19%;  background-color: #ffffff;margin-top: 10px;}
  .tp{width: 92%; height: 50%;text-indent: 5px;margin-top: 2%;}
  .tp img {width: 100%;height:100%;}
  .jianjie{width: 100%; height: 15%; margin-top: 5%;}
  .jianjie p { font-size: 12px; text-indent:5px; }
  .youhun{display: flex;}
  .youhun .k{width: 25%; font-size: 12px; border: 1px solid red;margin-left: 2%; text-align: center;color: red; opacity: 0.5;}
  .jiagek{margin-top: 3%;}
  .jiagek .jg{font-size: 16px; color: red;}
  .jiagek .dz{font-size: 12px; opacity: 0.5;margin-top:3%;}
  .jiaz{width: 100%; height: 10%; text-align: center;vertical-align:middle;}
</style>